<!DOCTYPE html>
<html lang="en">

<head>
    <title>文件管理系统</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 layui-vue 样式 -->
    <link rel="stylesheet" type="text/css" href="plugins/layui-vue/css/layui-vue.css">
    <!-- 引入 Vue 3, 使用全局变量 Vue -->
    <script src="plugins/layui-vue/js/vue.global.js"></script>
    <!-- 引入 layui-vue 组件库, 使用全局变量 LayuiVue -->
    <script src="plugins/layui-vue/js/layui-vue.js"></script>
    <link rel="stylesheet" href="css/common.css">
</head>

<body>
<div id="app">
    <h1>{{title}}</h1>
    <lay-button prefix-icon="layui-icon-return" @click="open('',prePath)"></lay-button>
    <lay-input v-model="path" size="sm" style="width: 90%;margin-left: 10px" v-on:keyup.enter="open('',path)" v-model="path" name="curPath"></lay-input>
    <lay-table :columns="columns" :data-source="dataSource" :default-toolbar="defaultToolbar">
        <template v-slot:username="{ data }"> {{data.name}} </template>
        <template v-slot:password="{ data }"> {{data.mod_time}} </template>
        <template v-slot:operator="{ data }">
            <lay-button radius type="primary" size="sm" v-if="data.is_dir" @click="open(data.name,path)">打开</lay-button>
            <lay-button radius type="normal" size="sm" v-if="!data.is_dir" @click="download(data.name,path)">下载</lay-button>
        </template>
    </lay-table>
</div>
</body>
<script src="js/axios.min.js"></script>
<script>
    const { createApp, ref } = Vue;
    const { layer } = LayuiVue;

    const App = {
        setup() {
            const checkbox = ref(true)
            const defaultToolbar = ref(true)

            const columns = [
                {
                    title:"名称",
                    width:"200px",
                    customSlot:"username",
                    key:"username"
                },{
                    title:"修改时间",
                    width: "180px",
                    customSlot:"password",
                    key:"password"
                },{
                    title:"操作",
                    width: "180px",
                    customSlot:"operator",
                    key:"operator"
                }
            ]

            return {
                columns,
                checkbox,
                defaultToolbar,
            }
        },
        data() {
            return {
                title: '文件管理系统',
                path:"",
                dataSource:[]
            }
        },
        methods:{
            open(name,path){
                console.log(name,path)
                this.list(name,path)
            },
            list(name,path){
                let that = this
                axios.post("/index/list",{"path":path,"name":name}).then(function(response) {
                    console.log(response)
                    if(response.status==200){
                        that.dataSource = response.data.data.list
                        that.path = response.data.data.path
                        that.prePath = response.data.data.prePath
                    }
                }).catch(function(response){
                    console.log("catch",response)
                }).finally(function(response){
                    console.log("finally",response)
                })
            },
            download(name,path){
                location = "/index/download?path=" + path + "&name=" + name
            }
        },
        created(){
            this.list("","")
        }
    };

    const app = createApp(App);
    app.use(LayuiVue);
    app.mount('#app');
</script>

</html>